<template>
  <view>
    <u-sticky :h5-nav-height="0">
      <view class="tablist">
        <view
          :class="['item', item.id === index ? 'on' : '']"
          v-for="item of tabs"
          :key="item.id"
          @click="index = item.id"
        >
          <view> {{ item.name }}</view></view
        >
      </view>
    </u-sticky>

    <view class="listBox" v-if="!index">
      <view class="list">
        <view
          class="item"
          v-for="(item, i) of data.worker_list"
          :key="i"
          @click="Emit.$emit('handle', 'checked', i)"
        >
          <view class="img">
            <image mode="aspectFill" :src="item.logo" lazy-load></image>
          </view>

          <view class="con">
            <view class="flex">
              <view class="name"> {{ item.name }} </view>
              <view class="time">可预约 · {{ item.begin_time }}</view>
            </view>

            <view class="conBd flex">
              <view class="conBdLet">
                <view class="score">{{ item.star }}分</view>
                <view>· 已服务{{ item.order_num }}单</view>
              </view>

              <view class="distance"
                ><i class="iconfont icon-map-filling1"></i> {{ item.distance }}
              </view>
            </view>

            <view class="conFd flex">
              <view class="let">
                <view class="letHd">
                  <view v-if="hasShowTag(item.certified, '1')">实名认证</view>
                  <view v-if="hasShowTag(item.certified, '2')">资质认证</view>
                  <view v-if="hasShowTag(item.certified, '3')">照片</view>
                </view>
                <view class="letBd">
                  <view class="num"
                    >评价<view>{{ item.comment_num }}</view></view
                  >
                  <view class="num"
                    >收藏<view>{{ item.favorite_num }}</view></view
                  >
                </view>
              </view>

              <view class="btn">
                <i
                  class="iconfont icon-xuanzekuangmoren"
                  v-if="!item.checked"
                ></i>
                <i class="iconfont icon-success-fill" v-else></i>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="index === 1">
      <u-parse :html="formatRichText(data.detail)"></u-parse
    ></view>
    <view v-if="index === 2">
      <u-parse :html="formatRichText(data.warn)"></u-parse
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  computed: {
    hasShowTag() {
      return (str, key) => {
        return str.indexOf(key) !== -1;
      };
    },

    formatRichText() {
      return (html) => {
        let newContent = html.replace(
          /<img[^>]*>/gi,
          function (match, capture) {
            match = match
              .replace(/style="[^"]+"/gi, "")
              .replace(/style='[^']+'/gi, "");
            match = match
              .replace(/width="[^"]+"/gi, "")
              .replace(/width='[^']+'/gi, "");
            match = match
              .replace(/height="[^"]+"/gi, "")
              .replace(/height='[^']+'/gi, "");
            return match;
          }
        );
        newContent = newContent.replace(
          /style="[^"]+"/gi,
          function (match, capture) {
            match = match
              .replace(/width:[^;]+;/gi, "max-width:100%;")
              .replace(/width:[^;]+;/gi, "max-width:100%;");
            return match;
          }
        );
        newContent = newContent.replace(/<br[^>]*\/>/gi, "");
        newContent = newContent.replace(
          /\<img/gi,
          '<img style="display:block;max-width:100%;height:auto"'
        );
        return newContent;
      };
    },
  },

  data() {
    return {
      tabs: [
        { name: "服务人员", id: 0 },
        { name: "项目详情", id: 1 },
        { name: "预定须知", id: 2 },
      ],
      index: 0,
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  padding: 0 24rpx 24rpx;

  .item {
    display: flex;
    padding: 24rpx;
    margin-bottom: 24rpx;
    background: #fff;
    border-radius: 20rpx;
  }

  .img {
    position: relative;
    margin-right: 20rpx;
    width: 180rpx;
    height: 180rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      background: #000;
    }
  }
  .img {
    position: relative;
    margin-right: 20rpx;
    width: 180rpx;
    height: 180rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      background: #000;
    }
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .con {
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .name {
    font-size: 30rpx;
    font-weight: bold;
    flex: 1;
    overflow: hidden;
    color: #262626;
  }

  .conBdLet {
    display: flex;
    align-items: center;
    padding: 12rpx 0;

    .score {
      color: #f85809;
      font-weight: bold;
      font-size: 30rpx;
    }
  }

  .distance {
    display: flex;
    align-items: center;
    color: #f85809;

    .iconfont {
      position: relative;
      top: 2rpx;
      font-size: 34rpx;
    }
  }

  .conFd {
    align-items: flex-end;
    .let {
      flex: 1;
      overflow: hidden;
      margin-right: 65rpx;

      .letHd {
        display: flex;
        flex-wrap: wrap;

        view {
          margin: 0 10rpx 10rpx 0;
          padding: 2rpx 6rpx;
          border-radius: 4rpx;
          border: 1rpx solid #b6b6b6;
        }
      }

      .letBd {
        display: flex;
        flex-wrap: wrap;

        .num {
          display: flex;
          margin-right: 24rpx;
          view {
            margin-left: 5rpx;
            font-weight: bold;
            color: #262626;
          }
        }
      }
    }

    .iconfont {
      font-size: 40rpx;

      &.icon-success-fill {
        color: #f0250e;
      }
    }
  }

  .diabled {
    .tag {
      background: #b6b6b6;

      &:after {
        border-top-color: #262626;
      }
    }

    .btn {
      background: #b6b6b6;
      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(137, 137, 137, 0.2);
    }
  }
}

.tablist {
  display: flex;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.33%;
    height: 90rpx;
    overflow: hidden;

    view {
      position: relative;
      font-size: 26rpx;
      color: #262626;

      &:after {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 26rpx;
        right: 26rpx;
        height: 6rpx;
        background: #f1270d;
        opacity: 0;
      }
    }

    &.on {
      view {
        font-weight: bold;

        &:after {
          opacity: 1;
        }
      }
    }
  }
}
</style>
